<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html {
            font-size: 10px;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1rem 0;
        }

        .title {
            font-size: 1.6rem;
        }

        .title h4 {
            margin: .2rem 0;
        }

        .genre {
            color: #888888;
            font-size: 1.2rem;
        }

        .logo {
            max-height: 4rem;
            max-width: 4rem;
            height: 100%;
            width: 100%;
        }

        .line {
            height: 1px;
            border-top: dotted 1px #e6e6e6;
        }
        .storePhoto img{
            width: 100%;
            height: 6rem;
        }
    </style>
</head>

<body>

    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>
        <div class="container">
            <ul>
                <li>
                    <div class="title">
                        <h4>雨天会</h4>
                        <div class="genre">美食·传菜</div>
                    </div>
                    <img class="logo" src="http://tx.haiqq.com/uploads/allimg/150411/16434930S-13.jpg">
                </li>
                <div class="line"></div>
                <li>
                    <div>
                        <i class="glyphicon glyphicon-map-marker">福建省厦门市湖里区金丰大厦</i>
                    </div>
                    <i class="glyphicon glyphicon-menu-right"></i>
                </li>
                <li>
                    <div>
                        <i class="glyphicon glyphicon-time">11:00 - 21:30</i>
                    </div>
                    <i class="glyphicon glyphicon-menu-right"></i>
                </li>
                <li>
                    <div>
                        <i class="glyphicon glyphicon-earphone">0592-5727298</i>
                    </div>
                    <i class="glyphicon glyphicon-menu-right"></i>
                </li>
                <li>
                    <div>
                        <i class="glyphicon glyphicon-picture">门店照片</i>
                        <div class="row storePhoto">
                            <div class="col-xs-4">
                                <img src="http://tx.haiqq.com/uploads/allimg/150411/16434930S-13.jpg">
                            </div>
                            <div class="col-xs-4">
                                <img src="http://tx.haiqq.com/uploads/allimg/150411/16434930S-13.jpg">
                            </div>
                            <div class="col-xs-4">
                                <img src="http://tx.haiqq.com/uploads/allimg/150411/16434930S-13.jpg">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>


    </body>

</html>